<template>

  <!-- 监控日志列表页 -->
  <div class="log-service">
    <el-dialog
      title="日志详情"
      :visible.sync="dialogVisible"
      width="1400px"
    >
      <div class="filter-container">
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px" @submit.native.prevent>
          <el-row>
            <el-col :span="13">
              <el-form-item label="时间" prop="allDate">
                <el-date-picker
                  v-model="allDate"
                  style="max-width: 100%;"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeTime"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" clearable placeholder="状态">
                  <el-option
                    v-for="dict in dict.type.monitorStatus"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <div style="display:flex;">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span style="margin-left: 20px;font-weight: 800;font-size: 20px">{{ titleData.nameTitle + titleData.nameData }}</span>
      <span style="margin-left: 60px;font-weight: 800;font-size: 20px">{{ titleData.addressTitle + titleData.addressData }}</span>
      <div class="table-container table-fullscreen">
        <!-- 表格数据视图 -->
        <div v-if="isShowTable">
          <FlexTable
            v-loading="loading"
            border
            :data="tableData"
            :columns="columnsOptions"
          />

          <el-pagination
            :page-size="pagination.pageSize"
            :current-page.sync="pagination.pageNo"
            layout="prev, pager, next, jumper"
            :total="pagination.totalPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dictMixin from '@/utils/mixins/dict'
import { listMonitorLog } from '@/api/serviceMonitor/MonitorLog'

export default {
  name: 'MonitorLog',
  dicts: ['monitorStatus'],
  mixins: [
    dictMixin(['monitorStatus'])
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显隐表格
      isShowTable: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      titleData: {
        nameTitle: '',
        nameData: '',
        addressTitle: '',
        addressData: ''
      },
      // 接口服务监测表格数据
      tableData: [],
      columnsOptions: [
        { label: '时间', prop: 'monitorTime' },
        { label: '状态',
          customRender: scope => {
            return this.getDictText('monitorStatus', scope.row.status)
          }
        }
      ],
      // 是否显示弹出层
      dialogVisible: false,
      allDate: [],
      // 查询参数
      queryParams: {
        startTime: '',
        endTime: '',
        status: '',
        monitorType: '',
        mainId: ''
      },
      // 分页相关
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  methods: {
    /** 初始化 */
    init(mainId, monitorType, name, address) {
      this.titleData.nameData = name
      this.titleData.addressData = address
      if (monitorType == 1) {
        this.titleData.nameTitle = '数据源名称：'
        this.titleData.addressTitle = 'ip地址：'
      } else if (monitorType == 2) {
        this.titleData.nameTitle = '设备名称：'
        this.titleData.addressTitle = '设备ip：'
      } else if (monitorType == 4) {
        this.titleData.nameTitle = '服务器名称：'
        this.titleData.addressTitle = '服务器地址：'
      } else {
        this.titleData.nameTitle = '接口名称：'
        this.titleData.addressTitle = '接口地址：'
      }
      this.queryParams.mainId = mainId
      this.queryParams.monitorType = monitorType
      this.dialogVisible = true
      this.getList()
    },
    /** 查询监测日志列表 */
    getList() {
      this.loading = true
      listMonitorLog({
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        ...this.queryParams
      }).then(({ data: response }) => {
        this.tableData = response.rows
        this.total = response.totalRows
        this.pagination.totalPage = response.totalRows
        this.loading = false
      })
    },
    changeTime(val) {
      if (!val) {
        this.allDate = []
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      } else {
        this.allDate = val
        this.queryParams.startTime = this.allDate[0]
        this.queryParams.endTime = this.allDate[1]
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetForm('queryForm')
      this.allDate = []
      this.changeTime()
      this.handleQuery()
    },
    // 分页操作
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.pagination.pageNo = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.log-service {
  ::v-deep .el-dialog__body {
    padding: 0 20px;
    height: 500px;
    overflow-y: auto;
  }
}
</style>
